<!--
 * @Description: 第十八章（异步组件&代码分包&suspense）
 * @Author: IA ia@kepro.space
 * @Date: 2025-02-16 12:40:36
-->
<template>
  <div class="sync">
    <div class="sync-content">
      <div><img :src="data.url" /></div>
      <div class="sync-pop">
        <div>{{ data.name }}</div>
        <div>&nbsp;{{ data.age }}</div>
      </div>
    </div>
    <hr />
    <div class="desc">{{ data.desc }}</div>
  </div>
</template>
<script setup lang="ts">
import { ref, reactive } from 'vue'
import { axios } from '@/server/axios'

interface Data {
  data: {
    name: string
    age: number
    url: string
    doc: string
  }
}

const { data } = await axios.get<Data>('./18th/data.json')
</script>
<style scoped lang="less">
.sync {
  display: flex;
  flex-direction: column;
  .sync-content {
    display: flex;
    flex-direction: row;
    img {
      width: 286px;
      height: 90px;
      margin-right: 10px;
    }
    .sync-pop {
      display: flex;
      justify-self: center;
      div {
        height: 90px;
        align-self: center;
        align-items: center;
        text-align: center;
        line-height: 90px;
        margin: 0 10px;
      }
    }
  }

  .desc {
    margin: 5px 0;
  }
}
</style>
